<template>
	<div class="addVideo">
		<el-form
			ref="forms"
			size="small"
			:model="forms"
			:rules="rules"
			label-position="right"
			label-width="120px"
			class="custom-form"
		>
			<el-form-item label="新闻分类：" prop="article_cat">
				<el-radio-group v-model="forms.article_cat">
					<el-radio :label="1">赛事新闻</el-radio>
					<el-radio :label="2">其他</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="新闻标题：" prop="article_title">
				<el-input
					v-model="forms.article_title"
					placeholder="请输入新闻标题"
					clearable
					maxlength="30"
					show-word-limit
					style="width: 100%"
				/>
			</el-form-item>
			<el-form-item label="显示位置：" prop="is_home">
				<el-radio-group v-model="forms.is_home">
					<el-radio :label="1">首页</el-radio>
					<el-radio :label="0">列表页</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item prop="pic" label="新闻缩略图：">
				<UploadImage
					ref="upload"
					:maxSize="2"
					@files="onUpload"
					:files="fileList"
					:limit="1"
					:imgWidth="forms.is_home == 1 ? 220 : 668"
					:imgHeight="forms.is_home == 1 ? 160 : 240"
				/>
			</el-form-item>
			<el-form-item label="选择发布方式：" prop="article_type">
				<el-radio-group v-model="forms.article_type">
					<el-radio :label="1">自定图文</el-radio>
					<el-radio :label="2">关联公众号文章</el-radio>
					<el-radio :label="3">关联赛事详情</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item
				label="图文详情："
				prop="article_content"
				v-if="forms.article_type == 1"
				key="editor"
			>
				<div class="section-content" style="min-height: 100px">
					<Editor ref="editor" v-model="forms.article_content" @input="richInput" />
				</div>
			</el-form-item>
			<el-form-item
				label="公众号链接："
				prop="link_addr"
				v-else
				key="link"
				v-else-if="forms.article_type == 2"
			>
				<el-input
					v-model="forms.link_addr"
					placeholder="请输入公众号链接"
					clearable
					style="width: 100%"
				/>
			</el-form-item>
			<el-form-item
				label="赛事ID："
				prop="race_id"
				key="race_id"
				v-else-if="forms.article_type == 3"
			>
				<el-input
					v-model="forms.race_id"
					placeholder="请输入赛事ID"
					clearable
					style="width: 100%"
				/>
			</el-form-item>
			<el-form-item label-width="0">
				<el-row type="flex" justify="center" style="width: 100%">
					<el-button style="margin-right: 5px; width: 70px" @click="$router.back()">取消</el-button>
					<el-button type="primary" @click="saveVideos" style="width: 100px" v-prevent-click>
						保存
					</el-button>
				</el-row>
			</el-form-item>
		</el-form>
	</div>
</template>
<script>
	import UploadImage from '@/components/UploadHttp/UploadImage.vue'
	import Editor from '@/components/Editor'
	import { uploadFunc } from '@/utils/upload.js'
	import { addArticle, getArticleInfo, editArticle } from '@/api/article.js'
	export default {
		name: 'createNews',
		components: { UploadImage, Editor },
		data() {
			return {
				disabled: false,
				forms: {
					article_title: '',
					article_type: 1,
					is_home: 2,
					article_cat: 1,
					link_addr: '',
					race_id: '',
					article_content: '',
					pic: [],
					is_close: 0
				},
				rules: {
					article_title: [{ required: true, message: '请输入新闻标题  ', trigger: 'blur' }],
					article_type: [{ required: true, message: '请选择发布方式', trigger: 'change' }],
					is_home: [{ required: true, message: '请选择显示位置', trigger: 'change' }],
					article_cat: [{ required: true, message: '请选择新闻分类', trigger: 'change' }],
					link_addr: [{ required: true, message: '请输入公众号链接', trigger: 'blur' }],
					race_id: [{ required: true, message: '请输入赛事ID', trigger: 'blur' }],
					focus_content: [{ required: true, message: '请输入图文详情', trigger: 'blur' }],
					pic: [{ type: 'array', required: true, message: '请添加新闻缩略图', trigger: 'change' }]
				},
				fileList: [],
				title: '新增'
			}
		},
		created() {
			const { id } = this.$route.query
			document.title = this.$route.meta.title = id ? '编辑新闻' : '发布新闻'
			if (id) {
				this.getDetailInfo(id)
			}
		},
		methods: {
			async getDetailInfo(article_id) {
				const loading = this.$setLoading()
				try {
					const { data } = await getArticleInfo({ article_id })

					if (data.is_home == 1) {
						data.pic = this.fileList = data.article_img ? { url: data.article_img } : []
					} else {
						data.pic = this.fileList = data.article_img2 ? [{ url: data.article_img2 }] : []
					}
					this.forms = data
					loading.close()
				} catch (e) {
					loading.close()
					console.log(e)
				}
			},
			async saveVideos() {
				this.$refs.forms.validate(async valid => {
					if (valid) {
						const loading = this.$setLoading({
							lock: true,
							text: '数据提交中~'
						})
						// 判断有没有需要上传的文件
						const uploadList = this.fileList.filter(item => {
							return item.status === 'ready' && item.raw
						})
						if (!uploadList.length) {
							this.saveData(loading)
						} else {
							uploadFunc(this.fileList).then(res => {
								this.saveData(loading)
							})
						}
					}
				})
			},
			// 保存更新进度数据
			async saveData(loading) {
				const {
					forms: { pic, ...params },
					fileList
				} = this
				if (params.is_home == 1) {
					params.article_img = fileList.length ? fileList[0].url : ''
				} else {
					params.article_img2 = fileList.length ? fileList[0].url : ''
				}

				const func = params.article_id ? editArticle(params) : addArticle(params)
				Promise.all([func])
					.then(res => {
						this.$message.success(`${params.article_id ? '修改' : '发布'}新闻成功！`)
						this.$router.back()
					})
					.finally(() => loading.close())
			},
			onUpload(list) {
				this.fileList = list
				this.forms.pic = list || []
				this.$refs.forms.validateField('pic')
				console.log(list)
			},
			richInput(val) {
				if (val) {
					this.$refs.forms.clearValidate('article_content')
				} else {
					this.$refs.forms.validateField('article_content')
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.addVideo {
		background-color: #fff;
		padding: 24px;
		.custom-form {
			width: 800px;
			margin: 0 auto;
		}
		::v-deep {
			.el-form-item__content {
				min-height: auto;
			}
			.el-form .el-form-item {
				margin-bottom: 20px;
			}
			.el-radio-group {
				margin-top: 8px;
			}
			.upload-demo .el-upload {
				overflow: hidden;
			}
			.el-upload__tip {
				margin: 0;
			}
			.picBox,
			.upload-img {
				width: 330px !important;
				height: 180px !important;
			}
		}
	}
</style>
